<template>
  <div class="addRecord">
    <van-form @submit="onSubmit" scroll-to-error>
      <van-row>
        <div
          style="display: flex; justify-content: space-between;margin-top：10px"
        >
          <van-tag plain type="primary" style="margin: 20px 10px 10px 10px">
            加测信息填写</van-tag
          >
          <van-button
            size="mini"
            type="info"
            style="
              float: right;
              margin-right: 20px;
              margin-top: 10px;
              padding: 0px 20px;
            "
            native-type="submit"
            >添加</van-button
          >
        </div>
      </van-row>

      <van-row type="flex">
        <van-col span="12">
          <van-field
            v-model="materialType"
            name="materialType"
            label="物料类型"
            required
            input-align="center"
            :rules="[{ required: true, message: '请选择物料类型' }]"
          >
            <template #input>
              <material-type v-model="materialType" />
            </template>
          </van-field>
        </van-col>
        <van-col span="12">
          <van-field
            v-model="materialCode"
            name="materialCode"
            label="物料名称"
            required
            input-align="center"
            :rules="[{ required: true, message: '请选择物料' }]"
          >
            <template #input>
              <material-name
                :materialType="materialType"
                v-model="materialCode"
              />
            </template>
          </van-field>
        </van-col>
        <van-col span="12">
          <van-field
            v-model="batchID"
            name="batchID"
            label="批号"
            required
            clickable
            input-align="center"
            :rules="[{ required: true, message: '请输入批号' }]"
          >
            <template #input>
              <batch-list v-model="batchID" :materialCode="materialCode">
              </batch-list>
            </template>
          </van-field>
        </van-col>
        <van-col span="12">
          <van-field
            v-model="suffix"
            name="suffix"
            label="后缀"
            input-align="center"
            placeholder="请输入"
            required
            :rules="[{ required: true, message: '后缀' }]"
          >
          </van-field>
        </van-col>
        <van-col span="12">
          <van-field
            v-model="deptmentID"
            name="deptmentID"
            label="请验部门"
            required
            input-align="center"
            :rules="[{ required: true, message: '请选择请验部门' }]"
          >
            <template #input>
              <department-tree
                v-model="deptmentID"
                :materialCode="materialCode"
              />
            </template>
          </van-field>
        </van-col>
        <van-col span="12">
          <van-field
            v-model="applyDate"
            name="applyDate"
            label="请验日期"
            required
            input-align="center"
            readonly
          >
            <template #input>
              <picker-date v-model="applyDate" />
            </template>
          </van-field>
        </van-col>

        <van-col span="12">
          <van-field
            v-model="urgencyDegreeCode"
            name="urgencyDegreeCode"
            label="紧急程度"
            required
            clickable
            input-align="center"
          >
            <template #input>
              <urgency-degree v-model="urgencyDegreeCode" />
            </template>
          </van-field>
        </van-col>

        <van-col span="12">
          <van-field
            v-model="isGiveName"
            name="isGiveName"
            label="是否送样"
            required
            readonly
            @click="showIsGive = true"
            placeholder="请选择"
            input-align="center"
          >
          </van-field>
        </van-col>
        <!-- <van-col span="12">
          <van-field
            v-model="prefix"
            name="prefix"
            label="前缀"
            input-align="center"
            placeholder="请输入"
          >
          </van-field>
        </van-col> -->

        <van-col span="12">
          <van-field
            v-model="extraRemarks"
            name="extraRemarks"
            label="加测原因"
            input-align="center"
            placeholder="请输入"
            required
            :rules="[{ required: true, message: '加测原因' }]"
          >
          </van-field>
        </van-col>
      </van-row>
    </van-form>
    <van-form @submit="onSubmit1" scroll-to-error>
      <van-row>
        <div
          style="display: flex; justify-content: space-between;margin-top：10px"
        >
          <van-tag plain type="primary" style="margin: 20px 10px 10px 10px">
            加测内容填写</van-tag
          >
          <van-button
            size="mini"
            type="info"
            style="
              float: right;
              margin-right: 20px;
              margin-top: 10px;
              padding: 0px 20px;
            "
            native-type="submit"
            >保存</van-button
          >
        </div>
      </van-row>
      <van-row type="flex">
        <van-col span="12">
          <van-field
            v-model="reportID"
            name="reportID"
            label="报告编号"
            required
            input-align="center"
            placeholder="请输入"
            :rules="[{ required: true, message: '请选择报告编号' }]"
          >
          </van-field>
        </van-col>
        <van-col span="12">
          <van-field
            v-model="testStandard"
            name="testStandard"
            label="检验标准"
            required
            input-align="center"
            :rules="[{ required: true, message: '请选择检验标准' }]"
          >
            <template #input>
              <text-standard
                v-model="testStandard"
                :materialCode="materialCode"
              />
            </template>
          </van-field>
        </van-col>
        <van-col span="12">
          <van-field
            v-model="sampleAttributesName"
            name="sampleAttributesName"
            label="检验项目"
            required
            readonly
            @click="showItemPopup"
            placeholder="请选择"
            input-align="center"
          >
          </van-field>
        </van-col>

        <van-col span="12">
          <van-field
            v-model="applyRemarks"
            name="applyRemarks"
            label="加测备注"
            input-align="center"
            placeholder="请输入"
          >
          </van-field>
        </van-col>
      </van-row>
    </van-form>
    <van-row>
      <div
        style="display: flex; justify-content: space-between;margin-top：10px"
      >
        <van-tag plain type="primary" style="margin: 20px 10px 10px 10px">
          加测记录</van-tag
        >
      </div>
      <div style="font-size: 0.42rem; padding: 0.26667rem 0.42667rem">
        {{ recordCount }}
      </div>
    </van-row>
    <van-cell-group>
      <van-cell
        :name="item.iautoid"
        :key="item.iautoid"
        v-for="item in addRecordArr"
        :title="item.reportID"
      >
        <template #label>
          <!-- <div>报告编号：{{ item.reportID }}</div> -->
          <div>加测时间：{{ item.applyDate }}</div>
          <div>加测内容：{{ item.applyRemarks }}</div>
          <div>加测原因：{{ item.extraRemarks }}</div>
        </template>
      </van-cell>
    </van-cell-group>

    <van-popup v-model="showIsGive" position="bottom" get-container="body">
      <van-picker
        show-toolbar
        :columns="isGiveArr"
        @confirm="saveIsGive"
        @cancel="cancelIsGive"
      />
    </van-popup>
    <van-popup
      v-model="showItem"
      position="bottom"
      :style="{ height: '80%' }"
      @close="closePopup"
      get-container="body"
    >
      <div class="van-picker__toolbar">
        <button type="button" class="van-picker__cancel" @click="cancel">
          取消
        </button>
        <button type="button" class="van-picker__confirm" @click="onConfirm">
          确认
        </button>
      </div>
      <div class="checkbox-con" style="overflow-y: auto">
        <van-cell title="全选">
          <template #right-icon>
            <van-checkbox
              name="all"
              @click="toggleAll"
              shape="square"
              v-model="checkedAll"
            />
          </template>
        </van-cell>
        <van-checkbox-group v-model="sampleAttributes" ref="checkboxGroup">
          <van-cell-group>
            <van-cell
              v-for="item in columns"
              clickable
              v-model="item.text"
              :key="item.value"
            >
              <template #right-icon>
                <van-checkbox
                  :name="item.value"
                  shape="square"
                  ref="checkboxes"
                />
              </template>
            </van-cell>
          </van-cell-group>
        </van-checkbox-group>
      </div>
    </van-popup>
  </div>
</template>

<script>
import {
  Form,
  Field,
  RadioGroup,
  Radio,
  Button,
  Popup,
  Toast,
  Col,
  Row,
  Tag,
  Checkbox,
  CheckboxGroup,
  Cell,
  CellGroup,
  Picker,
  List,
  SwipeCell,
  Notify,
} from "vant";
import MaterialType from "@/components/MaterialType";
import MaterialName from "@/components/MaterialName";
import TextStandard from "@/components/TextStandard";
import DepartmentTree from "./DepartmentTree";
import PickerDate from "./PickerDate";
import UrgencyDegree from "@/components/UrgencyDegree";
import { getExtraRecords, getStandardItem, addExtraApply } from "@/api/check";
import BatchList from "./BatchList.vue";
// import { to } from "@/utils";

export default {
  components: {
    [Form.name]: Form,
    [Field.name]: Field,
    [RadioGroup.name]: RadioGroup,
    [Radio.name]: Radio,
    [Button.name]: Button,
    [Popup.name]: Popup,
    [Toast.name]: Toast,
    [Col.name]: Col,
    [Row.name]: Row,
    [Tag.name]: Tag,
    [Checkbox.name]: Checkbox,
    [CheckboxGroup.name]: CheckboxGroup,
    [Cell.name]: Cell,
    [CellGroup.name]: CellGroup,
    [Picker.name]: Picker,
    [List.name]: List,
    [SwipeCell.name]: SwipeCell,
    [Notify.name]: Notify,
    MaterialType,
    MaterialName,
    BatchList,
    TextStandard,
    DepartmentTree,
    PickerDate,
    UrgencyDegree,
  },
  props: {
    applySource: {
      type: String,
    },
  },
  data() {
    return {
      token: "",
      materialType: "",
      materialCode: "",
      batchID: "",
      prefix: "",
      suffix: "",
      extraRemarks: "",
      reportID: "",
      testStandard: "",
      showItem: false,
      sampleAttributes: [],
      columns: [],
      checkedAll: false,
      sampleAttributesName: "",
      deptmentID: "",
      applyDate: "",
      isGiveSample: "",
      showIsGive: false,
      isGiveArr: [
        { text: "否", id: "False" },
        { text: "是", id: "True" },
      ],
      isGiveSample: "False",
      isGiveName: "否",
      applyRemarks: "",
      addRecordArr: [],
      recordCount: "",
      urgencyDegreeCode:"",
    };
  },
  watch: {
    materialCode(val) {
      this.batchID = "";
    },
    batchID(val) {
      this.getRecordData();
    },
    testStandard(val) {
      this.getStandardItem();
    },
  },
  methods: {
    saveIsGive(value) {
      this.isGiveSample = value.id;
      this.isGiveName = value.text;
      this.showIsGive = false;
    },
    cancelIsGive() {
      this.showIsGive = false;
    },
    showItemPopup() {
      this.showItem = true;
    },
    onConfirm() {
      this.showItem = false;
    },
    cancel() {
      this.showItem = false;
      this.sampleAttributes = [];
      this.checkedAll = false;
    },
    closePopup() {
      var num = this.sampleAttributes.length;
      this.sampleAttributesName = "已选中" + num + "项";
    },
    toggleAll() {
      this.$refs.checkboxGroup.toggleAll(this.checkedAll);
    },
    getRecordData() {
      var that = this;
      var params = {
        Token: this.token,
        materialCode: this.materialCode,
        batchID: this.batchID,
      };
      getExtraRecords(params)
        .then((response) => {
          that.recordCount = "加测次数：" + response.Result.count + "次";
          that.addRecordArr = response.Result.data;
        })
        .catch(() => {});
    },
    onSubmit(values) {
      var isExist = false;
      this.reportID = values.batchID + values.suffix;
      this.addRecordArr.map((item) => {
        if (item.reportID == this.reportID) {
          isExist = true;
        }
      });
      if (isExist) {
        Notify({ type: "warn", message: "此报告编号已存在" });
        return false;
      }
    },
    getStandardItem() {
      var params = {
        queryModel: { Token: this.token, code: this.testStandard },
      };
      getStandardItem(params)
        .then((response) => {
          this.sampleAttributes = [];
          this.sampleAttributesName = "";
          this.columns = response.Result;
        })
        .catch(() => {});
    },
    onSubmit1(values) {
      var extraCodesStr = "";
      if (this.sampleAttributes.length > 0) {
        extraCodesStr = this.sampleAttributes.toString();
      }
      var params = values;
      params.Token = this.token;
      params.materialCode = this.materialCode;
      params.batchID = this.batchID;
      params.isGiveSample = this.isGiveSample;
      params.extraRemarks = this.extraRemarks;
      params.extraCodes = extraCodesStr;

      addExtraApply(params)
        .then((response) => {
          this.getRecordData();
          // this.prefix = "";
          // this.suffix = "";
          // this.extraRemarks = "";
          // this.reportID = "";
          // this.applyRemarks = "";
        })
        .catch(() => {});
    },
  },
  async created() {
    this.token = localStorage.getItem("tokenKey");
  },
};
</script>

<style lang="less" scoped>
// /deep/ .van-field__body {
//   border: 1px solid #ccc;
// }
.van-row {
  background: #fff;
}
.van-hairline-unset--top-bottom::after,
.van-hairline--top-bottom::after {
  border-width: 0;
}

.addRecord {
  padding-top: 10px;

  .custom-field {
    /deep/ .van-field__control--custom {
      > .van-cell {
        width: auto;
      }

      .wapper {
        flex: 1;
        width: auto;
      }
    }
  }
}
/deep/.van-tree-select__item {
  line-height: 1rem;
}
/deep/.van-popup {
  overflow-y: hidden;
}
.checkbox-con {
  height: calc(100% - 1.2rem);
}
</style>